<template>
	<view :data-theme="theme" style="display: flex;flex-direction: column; height: 100%;">
		<scroll-view scroll-y="true" style="flex: 1; min-height: 10px;">
			<!-- 申请的品类 -->
			<view class="card" v-for="(item,index) in tableData" :key="index">
				<!-- <u-row customStyle="margin:10px;">
					<u-col span="12" style="flex-flow: row;justify-content: space-between;">
						<view style="color: #000;font-size: 15px;font-weight: bold;">{{item.parentName}}/{{item.name}}
						</view>
					</u-col>
				</u-row> -->
				<view class="header-top">
					<view style="color: #000;font-size: 15px;font-weight: bold;">{{item.parentName}}/{{item.name}}
					</view>
				</view>
				<view style="background-color: #f5f5f5;border-radius: 10px;">
					<!-- <u-row>
						<u-col span="12">
							<u-cell-group :border='false'>
								<u-cell size="large" title="供应层级" titleStyle="width:150px;" :value="radiovalue[index]"
									:isLink='true' :border='false'></u-cell>
							</u-cell-group>
						</u-col>
					</u-row> -->
					<view class="item_content">
						<view class="item_content_left" >供应层级</view>
						<view class="item_content_right">
							{{ radiovalue[index] }}
						</view>
					</view>
					<view class="item_content">
						<view class="item_content_left" >品牌</view>
						<view class="item_content_right">
							{{ brandValue[index] }}
						</view>
					</view>
					<view class="item_content">
						<view class="item_content_left" >可经营商品数量</view>
						<view class="item_content_right">
							{{item.manageShopCount}}
						</view>
					</view>
					<view class="item_content" style="border: none;">
						<view class="item_content_left" >单日最大供货量</view>
						<view class="item_content_right">
							<span>{{item.dayCount}}</span>
							<span style="padding: 0 20rpx;">|</span>{{item.units}}
						</view>
					</view>
				</view>
				<!-- 选填内容 -->
				<!-- view style="background-color: #f5f5f5;">
					<u--form labelPosition="left">
						<u-form-item>
							<u-cell-group>
								<u-cell size="large" title="品牌" titleStyle="width:150px;" :value="brandValue[index]"
									:isLink='true'></u-cell>
							</u-cell-group>
						</u-form-item>
						<u-form-item label="可经营商品数量" labelWidth="width:100px;" prop="userInfo.name"
							style="padding: 0 15px;" ref="item1">
							<span style="margin-left: 20px;">{{item.manageShopCount}}</span>
						</u-form-item>
						<u-form-item label="单日最大供货量" labelWidth="width:200px;" style="padding: 0 15px;">
							<span style="margin:0 20px;">{{item.dayCount}}</span>
							<span>|</span>
							<u-cell-group class="item-expanded" :border="false">
								<u-cell size="large" :value="item.units" isLink :border="false"></u-cell>
							</u-cell-group>
						</u-form-item>
					</u--form>
				</view> -->
			</view>
		</scroll-view>

		<view style="position: sticky;bottom: 0px;width: 100%;padding: 10px;background-color: #fff;">
			<!-- <view> -->
				<!-- <u-col span="12"> -->
					<!-- <u-button style="font-weight: bold;border-radius: 10px;" :color="bgColor" size="large"
						type="primary" text="撤回" @click="removeCategory"></u-button> -->
					<button class="bg_color"
						style="font-weight: bold;border-radius: 16rpx;padding: 20rpx;margin: 10rpx;color: #fff;"
						@click="removeCategory">撤回</button>
				<!-- </u-col> -->
			<!-- </view> -->

		</view>
	</view>
</template>

<script>
	import {
		businessQueryAuditApi,
		merchantRevocationApi,
		brandlistApi
	} from '@/api/category.js';
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	let app = getApp();
	export default {
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				tableData: [],
				checkboxList: [{
					name: '自有工厂/源头厂商',
					id: '1',
				}, {
					name: '一级批发商/经销商/贸易商/代理商',
					id: '2',
				}, {
					name: '二级批发商/经销商/贸易商/代理商',
					id: '3',
				}, {
					name: '其他',
					id: '4',
				}],
				radiovalue: [], //层级数组
				brandForm: {
					current: 1,
					size: 10,
				}, //品牌查询
				brandData: {},
				brandValue: [], //品牌回显
			};
		},
		onLoad(options) {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			this.getBrand();
			setTimeout(() => {
				this.businessQueryAudit();
			},500)
		},
		methods: {
			//获取品牌id
			getBrand() {
				brandlistApi(this.brandForm).then((res) => {
					this.brandData = res.data.records.map(({
						id,
						name
					}) => ({
						id,
						name
					}));
				});
			},
			// 待审核信息
			businessQueryAudit() {
				businessQueryAuditApi().then((res) => {
					this.queryAuditData = res.data;
					this.queryAuditData[0].content = JSON.parse(this.queryAuditData[0].content);

					this.tableData = this.queryAuditData[0].content;

					let supplyTier = [];
					for (let text of this.tableData) {
						supplyTier.push(text.supplyTier);
					}; // 拿供应层级的对应id
					for (let i = 0; i < this.checkboxList.length; i++) {
						for (let j = 0; j < supplyTier.length; j++) {
							if (this.checkboxList[i].id == supplyTier[j]) {
								this.radiovalue[j] = this.checkboxList[i].name
							}
						}
					} // 供应层级的数据回显
					let brandId = [];
					for (let text of this.tableData) {
						brandId.push(text.brandId);
					}; // 拿供应层级的对应id
					const filteredArr = brandId.filter(obj => obj !== undefined);
					for (let i = 0; i < this.brandData.length; i++) {
						for (let j = 0; j < filteredArr.length; j++) {
							if (this.brandData[i].id == filteredArr[j]) {
								this.brandValue[j] = this.brandData[i].name
							}
						}
					} // 品牌的数据名称回显
				})
			},
			//撤回审核
			removeCategory() {
				merchantRevocationApi().then((res) => {

				});
				uni.navigateBack({
					delta: 1, // 返回页面的层级，默认为1，表示返回上一级页面
					success: () => {
						const pages = getCurrentPages();
						const prevPage = pages[pages.length - 2];
						prevPage.businessQueryAudit(true);
					}
				});
			},

		}
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}

	.header-top {
		flex-flow: row;
		justify-content: space-between;
		margin: 10px;
	}
	
	.item_content {
		font-size: 32rpx;
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		background-color: #f5f5f5;
		border-bottom: 1px solid #e5e6e7;
		
		.item_content_left{
			flex: 1;
			padding: 10rpx;
		}
		
		.item_content_right{
			flex: 1;
			padding: 10rpx;
		}
	}
	

	.middle {
		margin: 20px 10px;
		font-weight: 500;
	}

	.card {
		margin: 20rpx 20rpx 20rpx 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 10px;
	}
</style>